<template>
  <div>
    <div class="banner">
      <el-carousel height="750px">
        <el-carousel-item v-for="item in 2" :key="item">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div>新茶上市</div>
      <div>Tea Leave</div>
      <div class="content_con">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(i,$index) in arr" :key="$index">
            <div class="grid-content bg-purple">
              <div class="imgbox">
                <img :src="i.imgurl" alt="" />
              </div>
              <div class="con_tit">
                {{i.title}}
              </div>
              <div class="con_jia">
                {{i.jiage}}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="btn">
        <span><i class="iconfont icon-icon-"></i></span>
      </div>
    </div>
    <div class="content_two">
          <div class="content_two_o">
              <div>关于我们</div>
              <div>About</div>
          </div>
          <div class="bbb">
            <div class="left">
              <img src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDUvOGJiMjZlNDUwZjY0NjBkNWNiMmE4NTg4YjBhYTY5ZmMtNTQweDI4MC05MC53ZWJw.webp" alt="">
            </div>
            <div class="right">
              <div class="rigth_wenzi">
                茶叶源于中国，茶叶最早是被作为祭品使用的。但从春秋后期就被人们作为菜食，在西汉中期发展为药用，西汉后期才发展为宫廷高级饮料，普及民间作为普通饮料那是西晋以后的事。发现最早人工种植茶叶的遗迹在浙江余姚的田螺山遗址，已有6000多年的历史。饮茶始于中国。
              </div>
              <div class="btnnn">
                <span>了解更多</span>
              </div>
            </div>
          </div>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvMDMzMjg2Zjc0ZWU4M2ZiM2U5MTllZTgwMDc4MjRjNTAtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvMGFkMzdiZDQwOGNjYWMwYzI0Y2JmNzdiMDZiNDg4ODAtNDAweDQwMC05MC53ZWJw.webp",
          title: "白杜丹",
          jiage: "￥1235.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjhlYTFmMDQ0Y2NhOWI4NWEzYWZkMzExYzczZTY3MjQtNDAweDQwMC05MC53ZWJw.webp",
          title: "白毫银针",
          jiage: "￥258.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjY1ZjU4NWU5ZmNmYjkxMDBlMzc1YmFkMDQyNTkwMzEtNDAweDQwMC05MC53ZWJw.webp",
          title: "云南普洱茶",
          jiage: "￥500.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvNDM1OTBkNjFjM2ViOGU2YzUyYWU3ZmM2N2I3YjQwZGMtNDAweDQwMC05MC53ZWJw.webp",
          title: "湖北老青茶",
          jiage: "￥400.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvNWM4NmNiNjkzOTdjOTM4NWQ4MzI0MDdlZDhhY2EwMmUtNDAweDQwMC05MC53ZWJw.webp",
          title: "霍山黄芽蒙洱银针",
          jiage: "￥711.0",
        },
      ],
    };
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.btnnn>span{
display:block;
width: 110px;
height: 40px;
background-color: #85bf41;
color: white;
font-size: 18px;
line-height: 40px;

}
.rigth_wenzi{
font-size: 16px;
margin-top: 40px;
padding-bottom: 30px;
text-align: left;
}
.bbb{
  padding: 0 40px;
  height: 300px;
  display: flex;
}
.left{
  flex: 4;
    background: white;
padding: 10px;
}
.right{
  flex: 6;
    background: white;
    padding: 30px;
}
.content_two_o>div:nth-child(1){
  font-family: 微软雅黑;
    font-size: 26px;
    font-weight: normal;
    font-style: normal;
    color: #ffffff;
    padding: 0 0 5px 0;
    display: block;
    padding: 0 0 5px 0;
    padding-top: 150px;
}
.content_two_o>div:nth-child(2){
  font-size: 13px;
    font-weight: normal;
    font-style: normal;
    color: #ffffff;
    display: block;
}
.content_two{
    width: 100%;
    min-height: 690px;
    background-image: url('https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDUvYTMxNGNjMzEzM2JhMGRkOTE2NTA0NmYwYTZjMDlmZjctOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp');   
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
}
.btn {
  height: 55px;
}
.btn>span>i{
   font-size: 30px;
   line-height: 46px;
}
.btn > span {
  width: 84px;
  height: 46px;
  display: inline-block;
 
  
  padding-top: 1px;
  padding-bottom: 1px;
  border-width: 2px;
  border-color: #90af6b;
  background-color: #90af6b;
  color: #fff;
}
.con_jia {
  color: #555555;
  font-size: 16px;
  font-family: sans-serif;
  padding: 10px 0 15px;
  width: 80%;
  margin: auto;
  border-bottom: 1px solid #ccc;
}
.con_tit {
  width: 80%;
  color: #555555;
  font-size: 16px;
  line-height: 22px;
  padding-bottom: 15px;
  font-weight: normal;
  margin: auto;
}
.el-col {
  padding-bottom: 10px;
  padding-top: 10px;
}
.imgbox {
  /* width: 80%; */
  /* padding: 5%; */
  overflow: hidden;
}
.imgbox > img {
  width: 60%;
}
.imgbox:hover img{
  transform: scale(1.1);
  transition: 1s;
}

.content{
  padding: 0 100px;
  background-color: #f7f7f7;
}
.content > div {
  font-family: 微软雅黑;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  color: #232323;
  padding: 0 0 5px 0;
  display: block;
  padding: 0 0 5px 0;
  /* vertical-align: bottom; */
  text-align: center;
}
.content_two_o{
  padding: 0 100px;
}
.content > div:nth-child(2) {
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  color: #999999;
  text-align: center;
}
.banner {
  width: 100%;
    padding-bottom: 40px;

}
.el-carousel {
  width: 100%;
}
.el-carousel__item:nth-child(2n) {
  background-size: cover;
  background-image: url("https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS81OTE2NjgzNjA1NzgxOWEwNWM0ZmY2ZDk1YWMzNTQ4Yi05MC53ZWJw.webp");
}
.el-carousel__item:nth-child(2n + 1) {
  background-size: cover;
  background-image: url("https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS82MWE3MmU5YWE1OGE3NWFmNjRkYWUyODNhMDMwNDU0MC05MC53ZWJw.webp");
}
</style>
